<!--
 @description 装修实景
 @fileName index.vue
 @author zengqiongying
 @created 2023/09/11 13:44:40
-->
<template>
  <div class="reality-page">
    <MineHeader arrow title="装修实景" />
    <div class="reality-tabs">
      <div
        v-for="(item,i) in tabs"
        :key="i"
        :class="['tab',{'active':item.code===curCode}]"
        @click="curCode = item.code"
      >
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div class="page-main">
      <NavFilter ref="navFilter" :off-top="88" immediate-refresh>
        <SchemeList :contribute-type="curCode" />
      </NavFilter>
    </div>
  </div>
</template>

<script>
import MineHeader from '@/components/MineHeader'
import NavFilter from '@/components/NavFilter'
import SchemeList from './DemoList.vue'
export default {
  name: 'RealityScene',
  components: { MineHeader, NavFilter, SchemeList },
  data() {
    return {
      tabs: [
        { name: '整家优选视频', code: 1 },
        { name: '整家优选图集', code: 0 }
      ],
      curCode: 1
    }
  },
  created() {
    // this.getFilterData(getRealitySceneFilter)
  },
  activated() {},

  mounted() {},
  beforeRouteLeave(to, from, next) {
    const names = ['RealityPicDetail', 'RealityVideoDetail']
    if (!names.includes(to.name)) {
      this.$removeKeepAliveCache(this)
    }
    next()
  },

  methods: {

  }
}

</script>
<style lang='less' scoped>
.reality-page{
  padding-top: 88PX;

}
.reality-tabs{
  width: 100%;
  position: fixed;
  z-index: 99;
  top: 44PX;
  left: 0;
  right: 0;
  height: 44PX;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .tab{
    position: relative;
    height: 25px;
    height: 25px;
    white-space: nowrap;
    font-size: 18px;
    font-weight: 400;
    color: #999999;
    line-height: 25px;
    span{
      position: relative;
      z-index: 1;
    }
    &.active{
      font-weight: bold;
      color: #000;
      &::before{
        content: '';
        position: absolute;
        z-index: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 6px;
        background: linear-gradient(90deg, #00D5C0 0%, #05C4C3 100%);
        border-radius: 3px;
      }
    }
  }
}
</style>
